<template>
  <el-dialog
    :title="deptForm.id ? '编辑部门': '新增部门' "
    :visible="showDinlog"
    width="30%"
    @close="handleClose"
  >
    <el-form ref="deptForm" :model="deptForm" label-width="120px" :rules="deptRules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="deptForm.name" placeholder="2-10个字符" size="mini" style="width:80%" />
      </el-form-item>

      <el-form-item label="部门编码" prop="code">
        <el-input v-model="deptForm.code" placeholder="2-10个字符" size="mini" style="width:80%" />
      </el-form-item>

      <el-form-item label="部门负责人" prop="managerId">
        <el-select v-model="deptForm.managerId" placeholder="请选择负责人" size="mini" style="width:80%">
          <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.id" />

        </el-select>
      </el-form-item>

      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="deptForm.introduce" type="textarea" placeholder="1-100个字符" size="mini" style="width:80%" :rows="4" />
      </el-form-item>

      <el-form-item>
        <el-row>
          <el-button size="mini" type="primary" @click="addClick">确认</el-button>
          <el-button size="mini" @click="handleClose">取消</el-button>
        </el-row>

      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>
import { getDepartmentsApi, getManagerListApi, addDepartmentsApi, getDepartmentDetailApi, updataDepartmentsApi } from '@/api/department'
export default {
  props: {
    showDinlog: Boolean,
    currentDeptId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      deptForm: {
        name: '', // 部门名称
        code: '', // 部门编码
        managerId: '', // 部门负责人名字
        introduce: '', // 部门介绍
        pid: '' // 部门父级部门id
      },
      deptRules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
          { validator: async(rule, value, callback) => {
            // 获取部门列表数据
            let depts = await getDepartmentsApi()
            // 区分场景: 如果是编辑模式需要排除自身,再去比较
            if (this.deptForm.id) {
              depts = depts.filter(item => item.id !== this.deptForm.id)
            }
            // 判断用户输入的部门名称是否重复
            const res = depts.some(item => item.name === value)
            // 如果重复 校验失败  反之 成功
            res ? callback(new Error('部门名称重复')) : callback()
          }, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
          { validator: async(rule, value, callback) => {
            // 获取部门列表数据
            let depts = await getDepartmentsApi()
            // 区分场景: 如果是编辑模式需要排除自身,再去比较
            if (this.deptForm.id) {
              depts = depts.filter(item => item.id !== this.deptForm.id)
            }
            // 判断用户输入的部门编码是否重复
            const res = depts.some(item => item.name === value)
            // 如果重复 校验失败  反之 成功
            res ? callback(new Error('部门编码重复')) : callback()
          }, trigger: 'blur' }
        ],
        managerId: [
          { required: true, message: '请输入部门负责人', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ]
      },
      managerList: []
    }
  },
  created() {
    this.manager()
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      // 搭配.sync的方式
      // 向父级发起关闭弹窗的请求,传入false
      this.$emit('update:showDinlog', false)
      // 清空表单
      this.$refs.deptForm.resetFields()
      // 手动清空表单
      this.deptForm = {
        name: '', // 部门名称
        code: '', // 部门编码
        managerId: '', // 部门负责人名字
        introduce: '', // 部门介绍
        pid: '' // 部门父级部门id
      }
      // 常规写法(子传父)
      // this.$emit('handleClose', false)
    },
    // 获取负责人数据
    async manager() {
      this.managerList = await getManagerListApi()
    },
    // 点击确定
    addClick() {
      // 兜底校验
      this.$refs.deptForm.validate(async valid => {
        if (!valid) return
        if (this.deptForm.id) {
          // 编辑部门
          await updataDepartmentsApi(this.deptForm)
          this.$message.success('编辑成功')
        } else {
          // 新增部门
          // 调用接口
          await addDepartmentsApi({ ...this.deptForm, pid: this.currentDeptId })
          // 提示用户
          this.$message.success('添加成功')
        }

        this.$emit('getDepartments')
        // 关闭弹窗+清空表单
        this.handleClose()
      })
    },
    // 获取部门详情数据
    async getDepartmentDetail() {
      // 调用接口
      this.deptForm = await getDepartmentDetailApi(this.currentDeptId)
    }
  }
}
</script>

<style>

</style>
